<template>
    <div class="background flex jc-center">
        <div class="wrapper relative">
            <div class="bgBox">
<!--                <img src="../assets/20190808_IMG_2392.jpg" alt="banner" class="banner">-->
            </div>
            <div class="main flex fd-column">
                <div class="header flex">
                    <div class="profile" :style="{
                        backgroundImage: `url(${poster.profile.url})`,
                        backgroundSize: poster.profile.scale * 2 + 'px',
                        backgroundPosition: `${poster.profile.pos.x * 2}px ${poster.profile.pos.y * 2}px`,
                    }"></div>
                    <div class="name">
                        <p>{{poster.username}}</p>
                    </div>
                </div>
                <div class="back flex ai-center" @click="$router.push('/')">
                    <i class="iconfont icon-angle-left"></i>
                    <span>返回聊天</span>
                </div>
                <div class="postNew flex ai-center" v-if="self" @click="$router.push(`/postBlog/${uid}`)">
                    <i class="iconfont icon-plus"></i>
                    <span>添加新博文</span>
                </div>
                <div class="listBox f1">
                    <ul class="list">
                        <li class="item" v-for="item in poster.blogs" :key="item._id" @click="$router.push(`/blog/${uid}/${item._id}`)">
                            <p class="time">{{item.time.slice(0, 10)}}</p>
                            <a class="title">{{item.title}}</a>
                            <div class="content" v-html="item.abstract"></div>
                            <div class="more flex">
                                <div class="like">点赞 {{item.like}}</div>
                                <div class="comment">评论 {{item.comment.length}}</div>
                                <div class="delete" v-show="self" @click.stop="deleteBlog(item._id)">删除这篇博文</div>
<!--                                <div class="share">分享 {{item.share}}</div>-->
                            </div>
                        </li>
                    </ul>
                    <div class="footer">
                        <hr/>
                        <p class="message">没有更多了</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "blog",
        props: ['uid'],
        data() {
            return {
                self: false,
                poster: {
                    _id: {},
                    username: '',
                    profile: {
                        pos: {
                            x: 0,
                            y: 0,
                        },
                        scale: '0',
                        url: ''
                    },
                    blogs: [],
                },
            }
        },
        methods: {
            async getPoster() {
                const res = await this.$http.get(`/blog/getBlog/${this.uid}`);
                this.poster = res.data.user;
                this.self = res.data.self;
            },
            async deleteBlog(id) {
                await this.$http.post('/blog/deleteBlog', {id});
                this.$emit('alert', '删除成功');
                await this.getPoster();
            }
        },
        created() {
            this.getPoster();
        },
        mounted() {

        }
    }
</script>

<style scoped lang="scss">
    .background {
        min-height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
    }

    .wrapper {
        width: 1200px;
        min-width: 700px;
        height: 100vh;

        .bgBox {
            height: 300px;
            overflow: hidden;
            user-select: none;
            background-color: #999;

            .banner {
                width: 100%;
                opacity: .8;
            }
        }

        ::-webkit-scrollbar {
            width: 6px;
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: #555;
            cursor: pointer;
        }

        ::-webkit-scrollbar-track {
            border-radius: 10px;
        }

        .main {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            overflow-y: auto;

            .header {
                position: absolute;
                top: 200px;
                left: 0;
                padding-left: 30px;

                .profile {
                    width: 100px;
                    height: 100px;
                    margin-right: 15px;
                    background-color: #999999;
                }

                .name {
                    display: flex;
                    align-items: center;

                    p {
                        position: relative;
                        bottom: 20px;
                        font-size: 24px;
                        font-weight: 500;
                        color: white;
                        text-shadow: 2px 2px 5px #999;
                    }
                }
            }

            .back,
            .postNew {
                position: absolute;
                top: 30px;
                color: white;
                cursor: pointer;
                user-select: none;
                transition: all .3s;

                .iconfont,
                span {
                    font-size: 20px;
                }

                .iconfont {
                    margin-right: 5px;
                }
            }

            .back {
                left: 30px;

                &:hover {
                    left: 35px
                }
            }

            .postNew {
                right: 30px;

                &:hover {
                    right: 35px
                }
            }

            .listBox {
                margin-top: 250px;
                padding: 100px 100px 50px 100px;
                box-sizing: border-box;
                background-color: white;

                .item {
                    cursor: pointer;
                    margin-bottom: 45px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    &:hover {
                        .title,
                        .content {
                            color: #666;
                        }
                    }

                    .time {
                        margin-bottom: 5px;
                        font-size: 15px;
                        color: #999;
                    }

                    .title {
                        display: block;
                        font-size: 26px;
                        line-height: 26px;
                        margin-bottom: 8px;
                        color: black;
                    }

                    .content {
                        margin-bottom: 5px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 5;
                        overflow: hidden;
                        font-size: 16px;
                        line-height: 30px;
                        font-family: Helvetica,sans-serif;
                        color: #333;
                    }

                    .more {
                        div {
                            margin-right: 10px;
                            color: #999;
                        }

                        .delete {
                            color: #DD4A68;
                        }
                    }
                }
            }

            .footer {
                margin-top: 40px;

                .message {
                    font-size: 16px;
                    text-align: center;
                    margin-top: 10px;
                }
            }
        }
    }
</style>